<template>
	<view class="content">
		<scroll-view :scroll-top="topScroll" scroll-y="true" class="scroll-Y"  @scroll="scroll">
			<view class="item-box">
				<view class="item" v-for="(item, i) in viewData" :key="i" @click="gotoWeb(item.path)">
					<view class="left-box">
						<view class="title">{{ slipJson(14, item.text) }}</view>
						<view class="path">{{ slipJson(60, item.path) }}</view>
					</view>
					<view class="right"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		slipJson
	} from '../../tools/tools.js';

	// 定义响应式变量
	const viewData = ref([]);
	const viewShow = ref(false);
	const topScroll = ref(0)


	const scroll = (e)=>{ 
		topScroll.value = e.detail.scrollTop
	}

	// 跳转
	const gotoWeb = (path) => {
		uni.navigateTo({
			url: `/pages/index/web-views/web-views?url=${path}`
		})
	}

	// 获取本地存储数据并处理
	onShow(() => {
		uni.getStorage({
			key: 'data',
			success(res) {
				let data = JSON.parse(res.data);
				viewData.value = data;

				if (!data[0]) {
					viewData.value = []
				}
			},
			fail(err) {
				console.error('获取本地存储失败', err);
				viewData.value = [];
				viewShow.value = false;
			}
		});
	});
</script>

<style lang="scss" scoped>
	.content {
		padding: 10rpx;

		.scroll-Y {
			height: calc(100vh - 20rpx);

			.item-box {
				.item {
					margin-bottom: 10rpx;
					padding: 10rpx;
					background-color: #c8e3e3;
					border-radius: 6rpx;

					.title {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.path {
						font-size: 12px;
						display: inline-block;
						max-width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>